<div id="tool-bar" class="tool-bar" dLoading [loading]="loading">
    <div class="tool-bar-left btn-group">
        <d-button
          id="undo"
          *ngIf="hasUndo"
          dTooltip
          bsStyle="text-dark"
          [content]="'toolBar.backButton' | translate"
          [disabled]="!hasUndo"
          (click)="handleUndoButtonClick($event)">
          <div class="icon-undo-customed"></div>
        </d-button>
        <d-button
          id="undo"
          *ngIf="!hasUndo"
          dTooltip
          bsStyle="text-dark"
          [content]="'toolBar.backButton' | translate"
          [disabled]="!hasUndo"
          (click)="handleUndoButtonClick($event)">
          <div class="icon-undo-disabled"></div>
        </d-button>
        <d-button
          id="redo"
          *ngIf="hasRedo"
          dTooltip
          bsStyle="text-dark"
          [content]="'toolBar.redoButton' | translate"
          [disabled]="!hasRedo"
          (click)="handleRedoButtonClick($event)">
          <div class="icon-redo-customed"></div>
        </d-button>
        <d-button
          id="redo"
          *ngIf="!hasRedo"
          dTooltip
          bsStyle="text-dark"
          [content]="'toolBar.redoButton' | translate"
          [disabled]="!hasRedo"
          (click)="handleRedoButtonClick($event)">
          <div class="icon-redo-disabled"></div>
        </d-button>
        <d-button
          id="zoom-in"
          dTooltip
          bsStyle="text-dark"
          [content]="'toolBar.zoomInButton' | translate"
          (click)="handleZoomInButtonClick($event)">
          <div class="icon-zoom-in-customed"></div>
        </d-button>
        <d-button
          id="zoom-out"
          dTooltip
          bsStyle="text-dark"
          [content]="'toolBar.zoomOutButton' | translate"
          (click)="handleZoomOutButtonClick($event)">
          <div class="icon-zoom-out-customed"></div>
        </d-button>
        <d-button
          id="zoom-reset"
          dTooltip
          bsStyle="text-dark"
          [content]="'toolBar.zoomResetButton' | translate"
          (click)="handleZoomResetButtonClick($event)">
          <div class="icon-zoom-reset"></div>
        </d-button>
        <d-button
          id="zoom-fit"
          dTooltip
          bsStyle="text-dark"
          [content]="'toolBar.zoomFitButton' | translate"
          (click)="handleZoomFitButtonClick($event)">
          <div class="icon-zoom-out-map"></div>
        </d-button>
        <d-button
          id="switch"
          dTooltip
          bsStyle="text-dark"
          [content]="'toolBar.switchButton' | translate"
          (click)="handleSwitchDirectionButtonClick($event)">
          <div class="icon-switch-customed"></div>
        </d-button>
        <d-button
          id="run"
          *ngIf="!statusGraph"
          dTooltip
          bsStyle="text-dark"
          [content]="'toolBar.runGraphButton' | translate"
          (click)="handleRunButtonClick($event)">
          <div class="icon-run-graph"></div>
        </d-button>
        <d-button
            id="stop"
            *ngIf="statusGraph === 1"
            dTooltip
            bsStyle="text-dark"
            [content]="'toolBar.stopGraphButton' | translate"
            (click)="handleStopButtonClick($event)">
            <div class="icon-stop-customed"></div>
        </d-button>        
        <d-button
            id="restart"
            *ngIf="statusGraph === 2"
            dTooltip
            bsStyle="text-dark"
            [content]="'toolBar.restartGraphButton' | translate"
            (click)="handleRestartButtonClick($event)">
            <div class="icon-restart-customed"></div>
        </d-button>

    </div>

    <div class="tool-bar-mid ellipsis project-name">
        {{'toolBar.project.name' | translate}}
        <p 
            (click)="openDialog()"
            dPopover
            [content]="'openCodeProject' | translate"
            [popMaxWidth]="100"
            [zIndex]="100"
            [position]="'bottom'"
            [controlled]="true"
            [trigger]="'hover'"
            style="display:inline-block; text-decoration: underline;cursor:pointer">
            {{formDataCreateProject.name}}
        </p>
    </div>

    <div class="tool-bar-mid ellipsis project-name">
        {{'toolBar.path' | translate}}
        {{formDataCreateProject.rootpath + "/" + formDataCreateProject.name}}
    </div>

    <div class="tool-bar-mid ellipsis project-name">
        {{'toolBar.graph.name' | translate}}
        {{formData.graphName}}
        <span *ngIf="showStar">*</span>
    </div>

    <div class="tool-bar-right">
        <d-select
            id="projectDropDown"
            class="btn-group project-drop-down"
            [options]="options1"
            [filterKey]="'specialContent'"
            [(ngModel)]="currentOption1"
            [highlightItemClass]=""
            (ngModelChange)="handleProjectDropDown($event)">
            <ng-template
                let-option="option"
                let-filterKey="filterKey">
                {{ option.name }}
            </ng-template>
        </d-select>

        <d-select
            class="btn-group flowunit-drop-down"
            [options]="options2"
            [filterKey]="'specialContent'"
            [(ngModel)]="currentOption2"
            [highlightItemClass]=""
            (ngModelChange)="handleFlowunitDropDown($event)">
            <ng-template
                let-option="option"
                let-filterKey="filterKey">
                {{ option.name }}
            </ng-template>
        </d-select>

        <button 
            id="open-graph-setting" 
            (click)="showGraphSettingDialog(graphSetting)" 
            class="tool-bar-button">
            {{'toolBar.graphSettingButton' | translate}}
        </button>
        <button 
            id="open-graph-setting" 
            (click)="showGraphDescriptionDialog(graphDescription)" 
            class="tool-bar-button">
            {{'toolBar.graphDescriptionButton' | translate}}
        </button>
        <button 
            id="open-graph-setting" 
            (click)="downloadGraph()" 
            class="tool-bar-button">
            {{'toolBar.downloadGraph' | translate}}
        </button>
    </div>
</div>

<ng-template #titleTemplate>
    <h1>{{formDataCreateProject.name}}</h1>
    <h4>{{'toolBar.path.name' | translate}}{{formDataCreateProject.rootpath}}</h4>
</ng-template>

<ng-template #newGraph>
    <d-layout class="basic-usage">
        <d-layout 
            dForm 
            [layout]="layoutDirection2"
            style="margin:10px">
            <d-form-item>
                <d-form-label [required]="true">
                    {{'graph.name' | translate}}
                </d-form-label>
                <d-form-control>
                    <div>
                        <input 
                            dTextInput 
                            name="graph_name" 
                            [(ngModel)]="formData.graphName" 
                            maxlength="31"/>
                    </div>
                </d-form-control>
            </d-form-item>
        </d-layout>
    </d-layout>
</ng-template>

<ng-template #createProject id="createProject">
    <d-layout class="basic-usage">
        <form 
            dForm 
            [layout]="layoutDirection"
            style="margin:10px">
            <d-form-item>
                <d-form-label [required]="true">
                    {{'toolBar.project_name' | translate}}
                </d-form-label>
                <d-form-control>
                    <div>
                        <input 
                            dTextInput 
                            name="project_name" 
                            [(ngModel)]="formDataCreateProjectName"
                            (input)="projectNameOnChange($event)"
                            maxlength="31"/>
                    </div>
                </d-form-control>
            </d-form-item>
            <d-form-item>
                <d-form-label [required]="true">
                    {{'toolBar.modal.project_path' | translate}}
                </d-form-label>
                <d-form-control>
                    <input 
                        dTextInput 
                        name="rootpath" 
                        [(ngModel)]="openproject_path" 
                        maxlength="4096"/>
                </d-form-control>
            </d-form-item>
            <d-form-item *ngIf="false">
                <d-form-label>
                    {{'toolBar.setting.desc' | translate}}
                </d-form-label>
                <d-form-control>
                    <textarea dTextarea name="desc"></textarea>
                </d-form-control>
            </d-form-item>
            <d-form-item>
                <d-form-label [required]="true">
                    {{'toolBar.setting.template' | translate}}
                </d-form-label>
                <d-form-control 
                    class="card-container" 
                    style="height:300px;overflow:auto">
                    <div style="width: 48%;display:inline-block">
                        <d-card 
                            class="card-container card-out" 
                            *ngFor="let d of optionSolutionList[0]"
                            (click)="onClickCard(d, $event)">
                            <d-card-header>
                                <d-avatar 
                                    dCardAvatar 
                                    [name]="d.dirname">
                                </d-avatar>
                                <d-card-title>
                                    {{d.name}}
                                </d-card-title>
                            </d-card-header>
                            <d-card-content>
                                <div>
                                    {{d.desc}}
                                </div>
                            </d-card-content>
                        </d-card>
                    </div>
                    <div style="width: 48%;display:inline-block">
                        <d-card 
                            class="card-container card-out"
                            *ngFor="let d of optionSolutionList[1]"
                            (click)="onClickCard(d, $event)">
                            <d-card-header>
                                <d-avatar 
                                    dCardAvatar 
                                    [name]="d.dirname">
                                </d-avatar>
                                <d-card-title>
                                    {{d.name}}
                                </d-card-title>
                            </d-card-header>
                            <d-card-content>
                                <div>{{d.desc}}</div>
                            </d-card-content>
                        </d-card>
                    </div>
                </d-form-control>
            </d-form-item>
        </form>
    </d-layout>
</ng-template>

<ng-template #openProject id="openProject">
    <d-layout class="basic-usage">
        <form dForm [layout]="layoutDirection" style="margin:10px">
            <d-form-item>
                <d-form-label [required]="true">
                    {{'toolBar.modal.project_path' | translate}}
                </d-form-label>
                <d-form-control>
                    <div class="flex-center">
                        <div class="devui-form-group" style="width:80%">
                            <input 
                                dTextInput 
                                type="text" 
                                class="devui-form-control devui-dropdown-origin"
                                name="language" 
                                placeholder="Search" 
                                [minLength]="0" 
                                [(ngModel)]="openproject_path"
                                dAutoComplete 
                                [source]="openProjectList" 
                                (selectValue)="onPathSelect($event)"
                                (keyup)="($event.which === 13)?searchDirectory():0"
                                (blur)="searchDirectory()"
                                maxlength="4096"/>
                        </div>
                        <d-button 
                            style="margin-left:30px;" 
                            icon="icon-search" 
                            bsStyle="primary"
                            (click)="searchDirectory()">
                        </d-button>
                    </div>
                </d-form-control>
            </d-form-item>
            <d-form-item>
                <d-form-control>
                    <d-data-table 
                        class="table-style" 
                        [dataSource]="folderList" 
                        [scrollable]="true" 
                        [type]="'striped'"
                        [borderType]="'borderless'" 
                        (cellClick)="cellClick($event)" 
                        maxHeight="360px">
                        <d-column 
                            field="folder" 
                            [header]="'toolBar.modal.folder' | translate" 
                            [cellClass]="'cell-style'">
                        </d-column>
                        <d-column 
                            field="isProject" 
                            [cellClass]="'cell-style'">
                        </d-column>
                    </d-data-table>
                </d-form-control>
            </d-form-item>
        </form>
    </d-layout>
</ng-template>

<ng-template #createFlowunit id="createFlowunit">
    <d-layout class="basic-usage">
        <form dForm [layout]="layoutDirection" style="margin:10px">
            <d-form-item>
                <d-form-label [required]="true">
                    {{'toolBar.modal.unitType' | translate}}
                </d-form-label>
                <d-form-control>
                    <d-radio-group 
                        [direction]="'row'" 
                        [(ngModel)]="formDataCreateFlowunit.lang"
                        (change)="langValueChange($event)" 
                        [direction]="'row'" 
                        [ngModelOptions]="{ standalone: true }">
                        <d-radio 
                            [name]="'lang2'" 
                            *ngFor="let value of valueslang" 
                            [value]="value.value">
                            {{ value.name }}
                        </d-radio>
                    </d-radio-group>
                </d-form-control>
            </d-form-item>

            <d-form-item>
                <d-form-label [required]="true">
                    {{'toolBar.modal.flowunit_name' | translate}}
                </d-form-label>
                <d-form-control>
                    <div>
                        <input 
                            dTextInput 
                            name="flowunit_name" 
                            [(ngModel)]="formDataCreateFlowunit.name" 
                            maxlength="31"/>
                    </div>
                </d-form-control>
            </d-form-item>

            <d-form-item *ngIf="formDataCreateFlowunit.lang === 'virtual'">
                <d-form-label [required]="true">
                    {{'modal.virtualFlowunitType' | translate}}
                </d-form-label>
                <d-form-control>
                    <div class="row">
                        <div class="col-md-5">
                            <d-select 
                                [options]="virtualOptions" 
                                [ngModelOptions]="{ standalone: true }"
                                [(ngModel)]="virtualType">
                            </d-select>
                        </div>
                    </div>
                </d-form-control>
            </d-form-item>

            <d-form-item *ngIf="formDataCreateFlowunit.lang !== 'virtual'">
                <d-form-label [required]="true">
                    {{'toolBar.modal.device' | translate}}
                </d-form-label>
                <d-form-control>
                    <d-select 
                        [appendToBody]="true" 
                        [ngModelOptions]="{ standalone: true }" 
                        *ngIf="formDataCreateFlowunit.lang !== 'python' && formDataCreateFlowunit.lang !== 'yolo'"
                        [appendToBodyDirections]=" ['centerDown', 'centerUp' ]"
                        [(ngModel)]="formDataCreateFlowunit.device" 
                        (valueChange)="deviceValueChange($event)"
                        [placeholder]="'toolBar.modal.device' | translate" 
                        [options]="optionsdevice">
                    </d-select>
                    <d-select 
                        [appendToBody]="true" 
                        [ngModelOptions]="{ standalone: true }" 
                        *ngIf="formDataCreateFlowunit.lang === 'python'"
                        [appendToBodyDirections]=" ['centerDown', 'centerUp' ]"
                        [(ngModel)]="formDataCreateFlowunit.device" 
                        (valueChange)="deviceValueChange($event)"
                        [placeholder]="'toolBar.modal.device' | translate" 
                        [options]="optionsdevicePython">
                    </d-select>
                    <d-select 
                        [appendToBody]="true" 
                        [ngModelOptions]="{ standalone: true }" 
                        *ngIf="formDataCreateFlowunit.lang === 'yolo'"
                        [appendToBodyDirections]=" ['centerDown', 'centerUp' ]"
                        [(ngModel)]="formDataCreateFlowunit.device" 
                        (valueChange)="deviceValueChange($event)"
                        [placeholder]="'toolBar.modal.device' | translate" 
                        [options]="optionsdeviceYolo">
                    </d-select>
                </d-form-control>
            </d-form-item>

            <d-form-item *ngIf="formDataCreateFlowunit.lang === 'inference'">
                <d-form-label [required]="true">
                    {{'model' | translate}}
                </d-form-label>
                <d-form-control>
                    <input 
                        dTextInput 
                        name="model" 
                        [(placeholder)]="placeholderModel" 
                        [(ngModel)]="formDataCreateFlowunit.model" />
                </d-form-control>
            </d-form-item>


            <d-form-item *ngIf="formDataCreateFlowunit.lang === 'inference'">
                <d-form-label>
                    {{"toolBar.copyModel" | translate}}
                </d-form-label>
                <d-form-control>
                    <d-toggle 
                        [(ngModel)]="isCopy" 
                        [size]="'sm'" 
                        [ngModelOptions]="{standalone: true}">
                    </d-toggle>
                </d-form-control>
            </d-form-item>

            <d-form-item>
                <d-form-label [required]="true">
                    {{ "toolBar.modal.portConfig" | translate}}
                </d-form-label>
                <d-form-control 
                    style="margin-bottom: 0 !important;">
                    <d-button 
                        bsStyle="primary" 
                        [bordered]="true" 
                        style="margin-right: 8px"
                        (btnClick)="addPortLine('input')">
                        {{ "toolBar.modal.addInput" | translate}}
                    </d-button>
                    <d-button 
                        bsStyle="primary" 
                        [bordered]="true" 
                        style="margin-right: 8px"
                        (btnClick)="addPortLine('output')">
                        {{ "toolBar.modal.addOutput" | translate}}
                    </d-button>
                    <div>
                        <d-data-table
                            [dataSource]="formDataCreateFlowunit.port_infos"
                            maxHeight="200px"
                            [scrollable]="true"
                            [tableOverflowType]="'overlay'"
                            [tableWidthConfig]="portTableWidthConfig"
                            >
                            <thead dTableHead>
                                <tr dTableRow *ngIf="formDataCreateFlowunit.lang !== 'inference'">
                                    <th dHeadCell *ngFor="let colOption of portHeaderOptions.columns">
                                        {{ colOption.header }}
                                    </th>
                                </tr>
                                <tr dTableRow *ngIf="formDataCreateFlowunit.lang === 'inference'">
                                    <th dHeadCell *ngFor="let colOption of portHeaderFullOptions.columns">
                                        {{ colOption.header }}
                                    </th>
                                </tr>
                            </thead>
                            <tbody dTableBody>
                                <ng-template let-rowItem="rowItem" let-rowIndex="rowIndex">
                                  <tr dTableRow>
                                    <td 
                                        dTableCell
                                        [editable]="true" 
                                        [editableTip]="editableTipHover"
                                        [(editing)]="rowItem['portTypeEdit']"
                                        [field]="'port_type'">
                                        <span *ngIf="!rowItem['portTypeEdit']">{{ rowItem?.port_type }}</span>
                                        <div *ngIf="rowItem['portTypeEdit']" class="customized-editor edit-padding-fix">
                                            <d-select
                                                [options]="optionsInOut"
                                                [isSearch]="true"
                                                [filterKey]="'label'"
                                                [toggleOnFocus]="true"
                                                [appendToBody]="true"
                                                [(ngModel)]="rowItem.port_type"
                                                (ngModelChange)="onEditEnd(rowItem, 'portTypeEdit')"
                                                [ngModelOptions]="{standalone: true}"
                                                >
                                            </d-select>
                                        </div>
                                    </td>
                                    <td 
                                        dTableCell
                                        [editable]="true" 
                                        [editableTip]="editableTipHover"
                                        [rowItem]="rowItem" 
                                        [(editing)]="rowItem['nameEditPortName']"
                                        >
                                        <span *ngIf="!rowItem['nameEditPortName']">{{ rowItem?.port_name }}</span>
                                        <div *ngIf="rowItem['nameEditPortName']" class="edit-padding-fix">
                                            <input
                                            class="devui-form-control"
                                            autofocus
                                            name="port_name"
                                            [(ngModel)]="rowItem.port_name"
                                            />
                                        </div>
                                    </td>
                                    <td 
                                        dTableCell 
                                        *ngIf="rowItem.data_type && formDataCreateFlowunit.lang === 'inference'"
                                        [editable]="true" 
                                        [editableTip]="editableTipHover"
                                        [rowItem]="rowItem" 
                                        [(editing)]="rowItem['nameEditDataType']"
                                        >
                                        <span *ngIf="!rowItem['nameEditDataType']">{{ rowItem?.data_type }}</span>
                                        <div *ngIf="rowItem['nameEditDataType']" class="customized-editor edit-padding-fix">
                                            <d-select
                                                [options]="optionsdata_type"
                                                [isSearch]="true"
                                                [filterKey]="'label'"
                                                [toggleOnFocus]="true"
                                                [appendToBody]="true"
                                                [(ngModel)]="rowItem.data_type"
                                                (ngModelChange)="onEditEnd(rowItem, 'nameEditDataType')"
                                                [ngModelOptions]="{standalone: true}"
                                                >
                                            </d-select>
                                        </div>
                                    </td>
                                    <td 
                                        dTableCell 
                                        *ngIf="rowItem.device && formDataCreateFlowunit.lang !== 'inference'"
                                        [editable]="true" 
                                        [editableTip]="editableTipHover"
                                        [(editing)]="rowItem['nameEditDevice']"
                                        [rowItem]="rowItem"
                                        [field]="'device'"
                                        >
                                        <span *ngIf="!rowItem['nameEditDevice']">
                                            {{ rowItem?.device }}
                                        </span>
                                        <div *ngIf="rowItem['nameEditDevice']" class="customized-editor edit-padding-fix">
                                            <d-select
                                                *ngIf="rowItem.device && formDataCreateFlowunit.lang === 'inference' 
                                                        || formDataCreateFlowunit.lang === 'c++'"
                                                [options]="optionsdevice"
                                                [isSearch]="true"
                                                [filterKey]="'label'"
                                                [toggleOnFocus]="true"
                                                [appendToBody]="true"
                                                [(ngModel)]="rowItem.device"
                                                (ngModelChange)="onEditEnd(rowItem, 'nameEditDevice')"
                                                [ngModelOptions]="{standalone: true}"
                                                >
                                            </d-select>
                                            <d-select
                                                *ngIf="rowItem.device && formDataCreateFlowunit.lang === 'python'"
                                                [options]="optionsdevicePython"
                                                [isSearch]="true"
                                                [filterKey]="'label'"
                                                [toggleOnFocus]="true"
                                                [appendToBody]="true"
                                                [(ngModel)]="rowItem.device"
                                                (ngModelChange)="onEditEnd(rowItem, 'nameEditDevice')"
                                                [ngModelOptions]="{standalone: true}"
                                                >
                                            </d-select>
                                            <d-select
                                                *ngIf="rowItem.device && formDataCreateFlowunit.lang === 'yolo'"
                                                [options]="optionsdeviceYolo"
                                                [isSearch]="true"
                                                [filterKey]="'label'"
                                                [toggleOnFocus]="true"
                                                [appendToBody]="true"
                                                [(ngModel)]="rowItem.device"
                                                (ngModelChange)="onEditEnd(rowItem, 'nameEditDevice')"
                                                [ngModelOptions]="{standalone: true}"
                                                >
                                            </d-select>
                                        </div>
                                    </td>
                                    <td 
                                        dTableCell
                                        >
                                        <a class="delete-button" (click)="deletePort(rowItem, rowIndex)">
                                            {{'toolBar.deleteDialogButton' | translate}}
                                        </a>
                                    </td>
                                  </tr>
                                </ng-template>
                            </tbody>
                        </d-data-table>
                    </div>
                </d-form-control>
            </d-form-item>

            <d-form-item *ngIf="formDataCreateFlowunit.lang !== 'inference' && 
                                formDataCreateFlowunit.lang !== 'yolo' && 
                                formDataCreateFlowunit.lang !== 'virtual'">
                <d-form-label [required]="true">
                    {{'toolBar.modal.flowunit_type' | translate}}
                </d-form-label>
                <d-form-control style="height:32px;">
                    <div style="display: inline-block;">
                        <d-tabs 
                            [(activeTab)]="formDataCreateFlowunit.type" 
                            type="slider">
                            <d-tab *ngFor="let item of flowunit_types" [id]="item.id">
                                <ng-template dTabTitle>
                                    {{ item.title }}
                                </ng-template>
                            </d-tab>
                        </d-tabs>
                    </div>
                </d-form-control>
                
                <div
                    bsStyle="common"
                    dPopover
                    [popType]="'default'"
                    [content]="'detail' | translate"
                    [position]="'top'"
                    [controlled]="true"
                    [appendToBody]="false"
                    [trigger]="'hover'"
                    >
                    <i 
                        class="icon icon-info-o enable-click"
                        (click)="linkToGuide()">
                    </i>

                </div>

            </d-form-item>

            <d-form-item *ngIf="formDataCreateFlowunit.lang === 'inference'">
                <d-form-label [required]="true">
                    {{'virtualType' | translate}}
                </d-form-label>
                <d-form-control style="height:32px">
                    <d-tabs 
                        [(activeTab)]="formDataCreateFlowunit['virtual-type']" 
                        type="slider">
                        <d-tab *ngFor="let item of typesCurrent" [id]="item.id">
                            <ng-template dTabTitle>
                                {{ item.title }}
                            </ng-template>
                        </d-tab>
                    </d-tabs>
                </d-form-control>
            </d-form-item>

            <d-form-item *ngIf="formDataCreateFlowunit.lang === 'yolo'">
                <d-form-label [required]="true">
                    {{ "toolBar.yoloType" | translate}}
                </d-form-label>
                <d-form-control style="height:32px">
                    <d-tabs 
                        [(activeTab)]="formDataCreateFlowunit['virtual-type']" 
                        type="slider">
                        <d-tab *ngFor="let item of types_yolo" [id]="item.id">
                            <ng-template dTabTitle>
                                {{ item.title }}
                            </ng-template>
                        </d-tab>
                    </d-tabs>
                </d-form-control>
            </d-form-item>

            <d-form-item>
                <d-form-label [required]="true">
                    {{'toolBar.modal.flowUnitGroup' | translate}}
                </d-form-label>
                <d-form-control>
                    <d-select 
                        [options]="flowunitGroupOptions" 
                        [customViewTemplate]="addCustomeGroup"
                        [(ngModel)]="formDataCreateFlowunit['group-type']" 
                        [ngModelOptions]="{standalone: true}">
                    </d-select>
                </d-form-control>
            </d-form-item>
            <d-form-item>
                <d-form-label>
                    {{'toolBar.setting.desc' | translate}}
                </d-form-label>
                <d-form-control>
                    <textarea 
                        dTextarea 
                        name="desc" 
                        [(ngModel)]="formDataCreateFlowunit.desc"
                        [ngModelOptions]="{standalone: true}"></textarea>
                </d-form-control>
            </d-form-item>
        </form>
    </d-layout>
</ng-template>

<ng-template #addCustomeGroup let-selectComponent>
    <div>

    </div>
</ng-template>

<ng-template #graphSetting id="graphSetting">
    <d-layout class="basic-usage">
        <d-tabs 
            [(activeTab)]="tabActiveId" 
            type="slider" 
            customWidth="100px">
            <d-tab id="tab1">
                <ng-template dTabTitle>
                    {{'toolBar.setting.basic'| translate}}
                </ng-template>
                <ng-template dTabContent>
                    <form 
                        dForm 
                        [layout]="layoutDirection"
                        style="margin:10px">
                        <d-form-item>
                            <d-form-label [required]="true">
                                {{'toolBar.setting.name' | translate}}
                            </d-form-label>
                            <d-form-control>
                                <div>
                                    <input 
                                        dTextInput 
                                        type="text" 
                                        [(ngModel)]="formData.graphName"
                                        [ngModelOptions]="{standalone: true}">
                                </div>
                            </d-form-control>
                        </d-form-item>
                        <d-form-item>
                            <d-form-label>
                                {{'toolBar.setting.desc' | translate}}
                            </d-form-label>
                            <d-form-control>
                                <textarea 
                                    dTextarea 
                                    name="desc" 
                                    [(ngModel)]="formData.graphDesc">
                                </textarea>
                            </d-form-control>
                        </d-form-item>
                       
                        <d-form-item>
                            <d-form-label>
                                {{'toolBar.debugFlowunitPath' | translate}}
                            </d-form-label>
                            <d-form-control>
                                <textarea 
                                    dTextarea 
                                    id="flowScanPath"
                                    name="dir" 
                                    [value]="formData.flowunitDebugPathForDisplay">
                                </textarea>
                            </d-form-control>
                        </d-form-item>
                    </form>
                </ng-template>
            </d-tab>

            <d-tab id="tab2">
                <ng-template dTabTitle>
                    {{'toolBar.setting.perf'| translate}}
                </ng-template>
                <ng-template dTabContent>
                    <form 
                        dForm 
                        [layout]="layoutDirection"
                        >
                        <d-form-item>
                            <d-form-label>
                                {{'toolBar.setting.perf.trace.enable' | translate}}
                            </d-form-label>
                            <d-form-control>
                                <d-checkbox 
                                    [(ngModel)]="formData.perfTraceEnable" 
                                    name="perfTraceEnable"
                                    (change)="onCheckboxPerfTraceEnableChange($event)">
                                </d-checkbox>
                            </d-form-control>
                        </d-form-item>
                        <d-form-item>
                            <d-form-label>
                                {{'toolBar.setting.perf.path' | translate}}
                            </d-form-label>
                            <d-form-control>
                                <div>
                                    <input 
                                        dTextInput 
                                        autocomplete="off" 
                                        name="userName"
                                        [(ngModel)]="formData.perfPath" />
                                </div>
                            </d-form-control>
                        </d-form-item>
                    </form>
                </ng-template>
            </d-tab>
        </d-tabs>
    </d-layout>
</ng-template>

<ng-template #graphDescription id="graphDescription">
    <d-layout class="basic-usage">
        
        <p class="description">
            {{'description.1' | translate}}
        </p>
        <br/>
        <p class="description">
            {{'description.2' | translate}}
        </p>
        <br/>
        <p class="description">
            {{'description.3' | translate}}
        </p>
        <br/>
        <p class="description">
            {{'description.4' | translate}}
        </p>
        <br/>
        <p class="description">
            {{'description.5' | translate}}
        </p>
        <br/>
        <p class="description">
            {{'description.6' | translate}}
        </p>
        <br/>
        <p class="description">
            {{'description.7' | translate}}
        </p>
        <br/>
        <br/>
        <p class="description">
            {{'description.content' | translate}}
            <a 
                style="font-size:18px" 
                href="https://modelbox-ai.com/modelbox-book/plugins/editor.html" 
                target="_blank">
                {{'guide' | translate}}
            </a>
        </p>

    </d-layout>
</ng-template>

<ng-template #graphSelect let-context='context'>
  <d-content>
    <d-data-table
      [fixHeader]="true" 
      [containFixHeaderHeight]="true" 
      [scrollable]="true" 
      [headerBg]="true"
      [colDraggable]="true" 
      [dataSource]="graphSelectTableDataForDisplay" 
      tableHeight="360px"
      [tableWidthConfig]="tableWidthConfig">
      <thead dTableHead>
        <tr dTableRow>
          <th dHeadCell *ngFor="let colOption of dataTableOptions.columns">{{ colOption.header }}</th>
        </tr>
      </thead>
      <tbody dTableBody>
        <ng-template let-rowItem="rowItem" let-rowIndex="rowIndex" let-nestedIndex="nestedIndex">
            <tr dTableRow [ngClass]="{ 'table-row-selected': rowItem.$checked }">
                <td dTableCell *ngFor="let colOption of dataTableOptions.columns">
                    <d-checkbox 
                        *ngIf="colOption.field === 'checked'" 
                        [ngModelOptions]="{ standalone: true }"
                        (ngModelChange)="onRowCheckChange($event, rowIndex, nestedIndex, rowItem)"
                        [ngModel]="rowItem.checked">
                    </d-checkbox>
                    <div 
                        *ngIf="colOption.field === 'name'" 
                        class="edit-padding-fix">
                        {{ rowItem[colOption.field] }}
                    </div>
                    <div 
                        *ngIf="colOption.field === 'graphPath'" 
                        class="edit-padding-fix">
                        {{ rowItem[colOption.field] }}
                    </div>
                    <div *ngIf="colOption.field === 'dotSrc'">
                        <div 
                            class="dot-class"
                            dPopover 
                            bsStyle="common" 
                            [content]="tipContent"
                            [controlled]="true">
                            {{ rowItem[colOption.field] }}
                        </div>
                        <ng-template #tipContent>
                            <div class="tips-block-top tips-tip-content">
                                {{ rowItem[colOption.field] }}
                            </div>
                        </ng-template>
                    </div>
                    <div *ngIf="colOption.field === 'desc'">
                        <div 
                            class="dot-class"
                            dPopover 
                            bsStyle="common" 
                            [content]="tipContent"
                            [controlled]="true">
                            {{ rowItem[colOption.field] }}
                        </div>
                        <ng-template #tipContent>
                            <div class="tips-block-top tips-tip-content">
                                {{ rowItem[colOption.field] }}
                            </div>
                        </ng-template>
                    </div>
                </td>
            </tr>
        </ng-template>
      </tbody>
    </d-data-table>
  </d-content>
</ng-template>

<d-toast 
  [value]="msgs" 
  [style]="{ top: '100px' }">
</d-toast>
